<#include "/common/layout.html">
<@body>
<div class="content">
	<form role="form" class="form-horizontal" method="post" action="${request.contextPath}/mall/category/doAdd" id="addCategoryForm">
		<div class="box-body">
			<div class="form-group">
				<label class="col-sm-2 control-label">上级类目</label>
				<div class="col-sm-10">
					<select id="parentId" name="parentId" class="form-control select2" style="width: 100%;" data-placeholder="--请选择类目--" required>
						<option></option>
						<option value="0">顶级类目</option>
						<#list categoryList as categorys>
						<option value="${categorys.categoryId}">${categorys.name}</option>
						</#list>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">类目名称</label>
				<div class="col-sm-10">
					<input type="text" id="name" name="name" class="form-control" placeholder="请输入类目名称" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">类目描述</label>
				<div class="col-sm-10">
					<input type="text" id="descripte" name="descripte" class="form-control" placeholder="请输入类目描述" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">类目状态</label>
				<div class="col-sm-10">
					<label class="radio-box"><input type="radio" name="status" value="1" checked="checked" class="form-control minimal" required> 正常</label>
					<label class="radio-box"><input type="radio" name="status" value="0" class="form-control minimal" required> 停用</label>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">类目图片</label>
				<div class="col-sm-10">
					<input type="hidden" id="picUrl" name="picUrl">
					<div class="file-loading">
			            <input id="uploadImg" name="file" type="file" multiple>
			        </div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">类目排序</label>
				<div class="col-sm-10">
					<input type="text" id="sortOrder" name="sortOrder" class="form-control" placeholder="请输入类目排序" readonly="readonly" required>
				</div>
			</div>
		</div>
	</form>
</div>
</@body> 
<script type="text/javascript">
	
	//单图上传
	$("#uploadImg").fileinput({
	    uploadUrl: '${request.contextPath}/system/sysfile/upload',
	    maxFileCount: 1,
	    autoReplace: true,
	    layoutTemplates:{
            actionUpload:'',//去除上传预览缩略图中的上传图片
            actionDownload:'' ,//去除上传预览缩略图中的下载图标
            actionDelete:'', //去除上传预览的缩略图中的删除图标
        },
	}).on('fileuploaded', function (event, data, previewId, index) {
		var rsp = data.response;
		console.log("return fileUrl：" + rsp.fileUrl);
		console.log("reutrn fileName：" + rsp.fileName);
	    $('#picUrl').val(rsp.fileUrl);
	}).on('filecleared', function(event) {
		$('#picUrl').val('');
	})
	
	//功能栏编码自动填充
	$("#parentId").on('change', function() {
		var pid = $(this).val();
		$.post('${request.contextPath}/mall/category/categoryCount?_dc=' + new Date().getTime(), {
			pid : pid
		}, function(response) {
			if (response.code == 200) {
				$("#sortOrder").val(response.data);
			}
		});
	});

	function submitHandler() {
		if ($("#addCategoryForm").validate().form()) {
			var categoryImg = $('#picUrl').val();
			if(categoryImg == null || categoryImg == undefined || categoryImg == '') {
				layer.msg("请上传类目图片", {icon : 2});
				return false;
			}
			var formData = $("#addCategoryForm").serialize();
			var index = layer.load(3); // 换了种风格
			$.ajax({
				url : $("#addCategoryForm").attr('action'),
				type : 'POST',
				data : formData,
				dataType : "json",
				beforeSend : function() {
					$.modal.loading("正在处理中，请稍后...");
					$.modal.disable();
				},
				success : function(data) {
					layer.close(index);
					if (data.code == 200) {
						if (data.msg) {
							parent.layer.msg(data.msg, {
								icon : 1
							});
						} else {
							parent.layer.msg('提交成功', {
								icon : 1
							});
						}
						parent.layer.closeAll('iframe'); // 关闭当前frame
						window.parent.dataTable.draw(false);
					} else {
						layer.msg(data.msg, {
							icon : 2
						});
						$.modal.closeLoading();
						$.modal.enable();
					}
				}
			});
		}
	}
</script>